<template>
	<view>
		<div class="top">
			<img class="bg-top" src="@/static/bg-top.png" alt="bg">
			<p>智慧城市大脑管理大屏</p>
			<img v-if="sensitive == 0" src="@/static/logo.png" alt="logo" class="logo">

			<div class="time-weather">
				<div class="time-box">
					<div class="time">{{ time }}</div>
					<div class="date">{{ date }}</div>
				</div>
				<div class="show-village-list">
					<div class="village-name" @click="showVillageList = !showVillageList">
						{{ selectVillageIndex == -1 ? '切换项目' : villageList[selectVillageIndex].villageName }}
					</div>
					<div class="arrows-dowm"></div>

					<div class="village-list" v-if="showVillageList">
						<div v-for="(item, index) of villageList" @click="goNewVillage(item.villageId, index)"
							:class="{ 'select-village': index == selectVillageIndex }" class="village-item">
							{{ item.villageName }}
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="nav-data-list">
			<img src="@/static/decorate-left.png" alt="decorate" class="decorate">
			<div class="nav-data-item">
				<div>村委总数</div>
				<div class="blue">{{ homeTopData.villageCount }}</div>
				<div>
					<div>村小组数：<text class="blue">{{ homeTopData.villageSubCount }}</text></div>
				</div>
			</div>
			<div class="nav-data-item">
				<div @click="clickType(0)" style="cursor: pointer; position: relative; z-index: 2;">月卡用户</div>
				<div @click="clickType(0)" style="cursor: pointer; position: relative; z-index: 2;" class="blue">{{ homeTopData.monthCardUser }}</div>
				<div>
					<div @click="clickType(2)" style="cursor: pointer;">黑名单：<text class="blue">{{ homeTopData.blackList }}</text></div>
					<div @click="clickType(1)" style="cursor: pointer;">白名单：<text class="blue">{{ homeTopData.whiteList }}</text></div>
				</div>
			</div>
			<div class="nav-data-item">
				<div>今日月卡开通(元)</div>
				<div class="orange">{{ homeTopData.todayPractical }}</div>
				<div>
					<div>较昨日 <text :class="{ 'green': homeTopData.compareDayRate >= 0, 'red': homeTopData.compareDayRate < 0 }">
							{{ homeTopData.compareDayRate }}%</text>
					</div>
				</div>
			</div>
			<div class="nav-data-item">
				<div>今日临停实收(元)</div>
				<div class="orange">{{ homeTopData.todayStop }}</div>
				<div>
					<div>较昨日 <text
							:class="{ 'green': homeTopData.compareDayStopRate >= 0, 'red': homeTopData.compareDayStopRate < 0 }">
							{{ homeTopData.compareDayStopRate }}%</text>
					</div>
				</div>
			</div>
			<div class="nav-data-item">
				<div>本月临停实收(元)</div>
				<div class="orange">{{ homeTopData.monthStop }}</div>
				<div>
					<div>较上月 <text
							:class="{ 'green': homeTopData.compareMonthStopRate >= 0, 'red': homeTopData.compareMonthStopRate < 0 }">
							{{ homeTopData.compareMonthStopRate }}%</text>
					</div>
				</div>
			</div>
			<div class="nav-data-item">
				<div>当前欠款金额(元)</div>
				<div class="yellow">{{ homeTopData.debtAmount }}</div>
				<div>
					<div @click="showTfjlList = true" style="cursor: pointer;">逃费次数：<text class="blue">{{ homeTopData.dodgeFeeCount }}</text></div>
					<div @click="showTfjlList = true" style="cursor: pointer;">逃费金额：<text class="blue">¥{{ homeTopData.dodgeFee }}</text></div>
				</div>
			</div>
			<img src="@/static/decorate-right.png" alt="decorate" class="decorate">
		</div>

		<div class="clll-box">
			<div class="box-title">
				<div class="triangle"></div>
				<div>车辆流量</div>
				<!-- <div>查看详情</div> -->
			</div>
			<div class="box-main">
				<div class="clll-nav-list">
					<!-- <div class="clll-nav-item">
						<img src="@/static/icon-01.png" alt="icon" class="icon">
						<div class="blue">{{clllEchartHear.todayInCount}}</div>
						<div>今日入场数</div>
					</div>
					<div class="clll-nav-item">
						<img src="@/static/icon-01.png" alt="icon" class="icon">
						<div class="blue">{{clllEchartHear.weekInCount}}</div>
						<div>本周入场数</div>
					</div> -->
					<div class="clll-nav-item">
						<img src="@/static/icon-01.png" alt="icon" class="icon">
						<div class="blue">{{ clllEchartHear.monthInCount }}</div>
						<div>本月入场数</div>
					</div>
					<div class="clll-nav-item">
						<img src="@/static/icon-01.png" alt="icon" class="icon">
						<div class="blue">{{ clllEchartHear.monthOutCount }}</div>
						<div>本月出场数</div>
					</div>
					<div class="clll-nav-item">
						<img src="@/static/icon-02.png" alt="icon" class="icon">
						<div class="orange">{{ clllEchartHear.practicalAmount }}</div>
						<div>本月实收金额</div>
					</div>
					<div class="clll-nav-item">
						<img src="@/static/icon-03.png" alt="icon" class="icon">
						<div class="yellow">{{ clllEchartHear.discountsAmount }}</div>
						<div>本月优惠金额</div>
					</div>
				</div>

				<div id="clll-echart" ref="clllEchart"></div>
				<div class="select-time">
					<div @click="showClllTimeFn">
						<block v-if="!showClllTime">{{ yearList[clllTime[0]] }}年{{ monthList[clllTime[1]] }}月</block>
						<block v-if="showClllTime">确定</block>
					</div>
					<div @click="showClllTimeFn" class="arrows-dowm"></div>

					<picker-view class="pick-time" indicator-class="pitch-item"
						mask-style='background: rgba(0, 0, 0, 0)' indicator-style="height: 32px;" v-if="showClllTime"
						:value="clllTime" @change="changeClllTime">
						<picker-view-column>
							<view v-for="item of yearList" class="pick-item">{{ item }}年</view>
						</picker-view-column>
						<picker-view-column>
							<view v-for="item of monthList" class="pick-item">{{ item }}月</view>
						</picker-view-column>
					</picker-view>
				</div>
			</div>
		</div>

		<div class="tsjy-box">
			<div class="box-title">
				<div class="triangle"></div>
				<div style="display: flex;align-items: center;">
					<div>投诉建议</div>
					<!-- <div v-if="overdueList.length != 0" class="box-title-tip blink" @click.stop="openWindows(1)">
						<div class="box-title-error ">!</div>您有<span class="box-title-num">{{total}}</span>条投诉建议工单已逾期
					</div> -->
					<div v-if="overdueList.length != 0" class="box-title-tip blink"
						@click="showTsjyList = !showTsjyList, tsjyType = 2, noDate = true">
						<div class="box-title-error ">!</div>您有<span class="box-title-num">{{ total }}</span>条投诉建议工单已逾期
					</div>
				</div>
				<!-- <div>查看详情</div> -->
			</div>
			<div class="box-main">
				<div class="main-data-list">
					<div @click="showTsjyList = !showTsjyList, tsjyType = 0, noDate = false">
						<div class="orange">{{ tsjyHeadData.assigned }}</div>
						<div>待指派</div>
					</div>
					<div @click="showTsjyList = !showTsjyList, tsjyType = 1, noDate = false">
						<div style="color: #DDF7FF;">{{ tsjyHeadData.followUp }}</div>
						<div>跟进中</div>
					</div>
					<div @click="showTsjyList = !showTsjyList, tsjyType = 3, noDate = false">
						<div class="blue">{{ tsjyHeadData.finish }}</div>
						<div>已完成</div>
					</div>
					<div @click="showTsjyList = !showTsjyList, tsjyType = 2, noDate = false">
						<div class="red">{{ tsjyHeadData.overdue }}</div>
						<div>已逾期</div>
					</div>
				</div>
				<div class="select-time">
					<div @click="showTsjyTimeFn">
						<block v-if="!showTsjyTime">{{ yearList[tsjyTime[0]] }}年{{ monthList[tsjyTime[1]] }}月</block>
						<block v-if="showTsjyTime">确定</block>
					</div>
					<div @click="showTsjyTimeFn" class="arrows-dowm"></div>

					<picker-view class="pick-time" indicator-class="pitch-item"
						mask-style='background: rgba(0, 0, 0, 0)' indicator-style="height: 32px;" v-if="showTsjyTime"
						:value="tsjyTime" @change="changeTsjyTime">
						<picker-view-column>
							<view v-for="item of yearList" class="pick-item">{{ item }}年</view>
						</picker-view-column>
						<picker-view-column>
							<view v-for="item of monthList" class="pick-item">{{ item }}月</view>
						</picker-view-column>
					</picker-view>
				</div>
				<div id="tsjy-echart-left" ref="tsjyEchartLeft"></div>
				<div id="tsjy-echart-right" ref="tsjyEchartRight"></div>
			</div>
		</div>

		<div class="rcgl-box">
			<div class="box-title">
				<div class="triangle"></div>
				<div style="display: flex;align-items: center;">
					<div>日常管理</div>
					<!-- <div v-if="dateOverdueList.length != 0" class="box-title-tip blink" @click.stop="openWindows(2)">
						<div class="box-title-error ">!</div>您有<span
							class="box-title-num">{{dateTotal}}</span>条日常查处工单已逾期
					</div> -->
					<div v-if="dateOverdueList.length != 0" class="box-title-tip blink"
						@click.stop="showRcglList = true,rcglType = 2, noDate = true">
						<div class="box-title-error ">!</div>您有<span
							class="box-title-num">{{ dateTotal }}</span>条日常查处工单已逾期
					</div>
				</div>
				<!-- <div>查看详情</div> -->
			</div>
			<div class="box-main">
				<div class="main-data-list">
					<div @click="showRcglList = true, timeType = 0, noDate = false">
						<div class="blue">{{ rcglHeadData.todayCount }}</div>
						<div>今日查处</div>
					</div>
					<div @click="showRcglList = true, timeType = 1, noDate = false">
						<div class="blue">{{ rcglHeadData.weekCount }}</div>
						<div>本周查处</div>
					</div>
					<div @click="showRcglList = true, timeType = 2, noDate = false">
						<div class="blue">{{ rcglHeadData.monthCount }}</div>
						<div>本月查处</div>
					</div>
				</div>
				<div class="select-time">
					<div @click="showRcglTimeFn">
						<block v-if="!showRcglTime">{{ yearList[rcglTime[0]] }}年{{ monthList[rcglTime[1]] }}月</block>
						<block v-if="showRcglTime">确定</block>
					</div>
					<div @click="showRcglTimeFn" class="arrows-dowm"></div>

					<picker-view class="pick-time" indicator-class="pitch-item"
						mask-style='background: rgba(0, 0, 0, 0)' indicator-style="height: 32px;" v-if="showRcglTime"
						:value="rcglTime" @change="changeRcglTime">
						<picker-view-column>
							<view v-for="item of yearList" class="pick-item">{{ item }}年</view>
						</picker-view-column>
						<picker-view-column>
							<view v-for="item of monthList" class="pick-item">{{ item }}月</view>
						</picker-view-column>
					</picker-view>
				</div>
				<div id="rcgl-echart-left" ref="rcglEchartLeft"></div>
				<div id="rcgl-echart-right" ref="rcglEchartRight"></div>
			</div>
		</div>

		<img src="@/static/bg-bottom.png" alt="bottom" class="bottom-img">

		<div v-if="detailStatus" class="maskLayer" @click.stop="detailStatus = false">
			<div class="maskLayer-detail" @click.stop="">
				<!-- 顶部 -->
				<div class="maskLayer-detailTop">
					<div class="box-title">
						<div class="triangle"></div>
						<div>{{ openType == 1 ? '投诉建议逾期列表' : '日常查处逾期列表' }}</div>
					</div>
					<!-- 关闭按钮 -->
					<div class="close-item hoverClass" @click.stop="detailStatus = false">
						<img class="close" src="../static/icon-close.png" mode="">
					</div>
				</div>
				<!-- list -->
				<div class="maskLayer-detail-list">
					<div class="maskLayer-detail-title">
						<div>序号</div>
						<div>村委名称</div>
						<div>工单编号</div>
						<div>分类名称</div>
						<div>内容</div>
						<div>指派时间</div>
						<div>预计完成时间</div>
						<div>处理人</div>
						<div>状态</div>
					</div>
					<div class="maskLayer-list-box">
						<div v-for="(item, index) in overdueList" :key="index" class="maskLayer-detail-title"
							:class="index % 2 == 0 ? 'color1' : 'color2'">
							<div>{{ item.serialNumber }}</div>
							<div>{{ item.villageName }}</div>
							<div>{{ item.code }}</div>
							<div>{{ item.subTypeName }}</div>
							<div>{{ item.content }}</div>
							<div>{{ item.assignedTime }}</div>
							<div>{{ item.planCompleteTime }}</div>
							<div>{{ item.handlerName }}</div>
							<div style="color: #FD5421;">已逾期</div>
						</div>
					</div>
				</div>
				<!-- 分页 -->
				<view class="pages-box">
					<view class="pages">
						<view class="pages-total">共{{ total }}个结果</view>
						<Pagination class=" hoverClass" :total="total" :pageSize="pageSize" :nowPage="nowPage"
							@change="change">
						</Pagination>
						<view class="pagesSize">
							<view class="">前往</view>
							<input type="number" v-model="nowPageNum" @confirm="changeSearch()">
							<view class="">页</view>
						</view>
					</view>
				</view>
			</div>
		</div>


		<div v-if="detailDateStatus" class="maskLayer" @click.stop="detailDateStatus = false">
			<div class="maskLayer-detail" @click.stop="">
				<!-- 顶部 -->
				<div class="maskLayer-detailTop">
					<div class="box-title">
						<div class="triangle"></div>
						<div>{{ openType == 1 ? '投诉建议逾期列表' : '日常查处逾期列表' }}</div>
					</div>
					<!-- 关闭按钮 -->
					<div class="close-item hoverClass" @click.stop="detailDateStatus = false">
						<img class="close" src="../static/icon-close.png" mode="">
					</div>
				</div>
				<!-- list -->
				<div class="maskLayer-detail-list">
					<div class="maskLayer-detail-title">
						<div>序号</div>
						<div>村委名称</div>
						<div>工单编号</div>
						<div>分类名称</div>
						<div>内容</div>
						<div>指派时间</div>
						<div>预计完成时间</div>
						<div>处理人</div>
						<div>状态</div>
					</div>
					<div class="maskLayer-list-box">
						<div v-for="(item, index) in dateOverdueList" :key="index" class="maskLayer-detail-title"
							:class="index % 2 == 0 ? 'color1' : 'color2'">
							<div>{{ item.serialNumber }}</div>
							<div>{{ item.villageName }}</div>
							<div>{{ item.code }}</div>
							<div>{{ item.subTypeName }}</div>
							<div>{{ item.content }}</div>
							<div>{{ item.assignedTime }}</div>
							<div>{{ item.planCompleteTime }}</div>
							<div>{{ item.handlerName }}</div>
							<div style="color: #FD5421;">已逾期</div>
						</div>
					</div>

				</div>
				<!-- 分页 -->
				<view class="pages-box">
					<view class="pages">
						<view class="pages-total">共{{ dateTotal }}个结果</view>
						<Pagination class=" hoverClass" :total="dateTotal" :pageSize="datePageSize"
							:nowPage="dateNowPage" @change="dateChange">
						</Pagination>
						<view class="pagesSize">
							<view class="">前往</view>
							<input type="number" v-model="dateNowPageNum" @confirm="dateChangeSearch()">
							<view class="">页</view>
						</view>
					</view>
				</view>
			</div>
		</div>
		
		<div v-if="showCarList" class="maskLayer" @click.stop="detailStatus = false;showCarList = false;">
			<div class="maskLayer-detail" @click.stop="">
				<!-- 顶部 -->
				<div class="maskLayer-detailTop">
					<div class="box-title">
						<div class="triangle"></div>
						<div>车辆登记名单管理</div>
					</div>
					<!-- 关闭按钮 -->
					<div class="close-item hoverClass" @click.stop="showCarList = false">
						<img class="close" src="../static/icon-close.png" mode="">
					</div>
				</div>
				<!-- input -->
				<div class="maskLayer-detail-input">
					<div style="display: flex;">
						<input class="car-input" v-model="carKeyword" type="text" placeholder="请输入车牌号码"
							placeholder-class="placeholder">
						<div class="car-card-list">
							<div :class="{'car-card-select': carListType == 0}" @click='clickType(0)'>月卡</div>
							<div :class="{'car-card-select': carListType == 1}" @click='clickType(1)'>白名单</div>
							<div :class="{'car-card-select': carListType == 2}" @click='clickType(2)'>黑名单</div>
						</div>
					</div>
					<div class="maskLayer-detail-inputRight hoverClass">
						<div @click="resetCarList">重置</div>
						<div @click="searchCarList">搜索</div>
					</div>
				</div>
				<!-- list -->
				<div class="maskLayer-detail-list car-list-white" v-show='carListType != 2'>
					<div class="maskLayer-detail-title car-list-nav">
						<div>序号</div>
						<div>车牌号码</div>
						<div>用户名称</div>
						<div>手机号码</div>
						<div>套餐名称</div>
						<div>有效开始日期</div>
						<div>有效截止日期</div>
						<div>备注</div>
					</div>
					<div v-if="carList.length != 0"
						 class="maskLayer-list-box">
						<div v-for="(item, index) in carList" :key="index" class="maskLayer-detail-title car-list-nav"
							:class="index % 2 == 0 ? 'color1' : 'color2'">
							<div>{{ item.serialNumber }}</div>
							<div>{{ item.carNumber }}</div>
							<div>{{ item.personName }}</div>
							<div>{{ item.phone }}</div>
							<div>{{ item.basicTcName }}</div>
							<div>{{ item.startTime }}</div>
							<div>{{ item.endTime }}</div>
							<div>{{ item.remark?item.remark:'-' }}</div>
						</div>
					</div>
					<div v-else class="noData">
						暂无数据
					</div>
				</div>
				<div class="maskLayer-detail-list car-list-black" v-show='carListType == 2'>
					<div class="maskLayer-detail-title car-list-nav">
						<div>序号</div>
						<div>车牌号码</div>
						<div>名单类型</div>
						<div>开始日期</div>
						<div>结束日期</div>
						<div>操作人员</div>
						<div>操作时间</div>
						<div>备注</div>
					</div>
					<div v-if="carList.length != 0"
						 class="maskLayer-list-box">
						<div v-for="(item, index) in carList" :key="index" class="maskLayer-detail-title car-list-nav"
							:class="index % 2 == 0 ? 'color1' : 'color2'">
							<div>{{ item.serialNumber }}</div>
							<div>{{ item.carNumber }}</div>
							<div>黑名单</div>
							<div>{{ item.startTime }}</div>
							<div>{{ item.endTime }}</div>
							<div>{{ item.operateName }}</div>
							<div>{{ item.operateTime }}</div>
							<div>{{ item.remark?item.remark:'-' }}</div>
						</div>
					</div>
					<div v-else class="noData">
						暂无数据
					</div>
				</div>
				<!-- 分页 -->
				<view class="pages-box">
					<view class="pages">
						<view class="pages-total">共{{carTotal}}个结果</view>
						<Pagination class=" hoverClass" :total="carTotal" :pageSize="pageSize" :nowPage="carNowPage"
							@change="changeCarList">
						</Pagination>
						<view class="pagesSize">
							<view class="">前往</view>
							<input type="number" v-model="carNowPageNum" @confirm="changeCarListSearch()">
							<view class="">页</view>
						</view>
					</view>
				</view>
			</div>
		</div>

		<TSJYList :show="showTsjyList" @hideTsjy="hideTsjy" :type="tsjyType" :userType="1"
			:projectList="villageList" @reset="resetList" :year="yearList[tsjyTime[0]]" :month="monthList[tsjyTime[1]]"
			:noDate="noDate"></TSJYList>
		<RCGLList :show="showRcglList" :timeType="timeType" @hide="hideRcgl" :type="rcglType" :userType="1"
			:projectList="villageList" @reset="resetList" :noDate="noDate"></RCGLList>
		<TFJLList :show="showTfjlList" @hide="hideTfjl" :userType="1" :projectList="villageList">
		</TFJLList>
	</view>
</template>

<script>
import * as echart from 'echarts'
import '@/static/echarts-tooltip-carousel.js'
import Pagination from "@../../components/bwm-pagination/bwm-pagination.vue" // 分页组件
import TSJYList from '@/components/TSJYList'
import RCGLList from '@/components/RCGLList'
import TFJLList from '@/components/TFJLList'

let clllEchartTools = null
let tsjyEchartTools = null
let rcglEchartRightTools = null
export default {
	components: {
		Pagination,
		TSJYList,
		RCGLList,
		TFJLList,
	},
	data() {
		return {
			sensitive: 0,
			openType: 0,
			url: getApp().globalData.url,
			// ----- 投诉逾期分页 ----- //
			overdueList: [],
			detailStatus: false, // 详情状态
			total: 0, // 项目列表总页数
			pageSize: 10, // 项目列表每页条数
			nowPage: 1, // 项目列表当前页码
			nowPageNum: 1, // 项目列表当前页码
			// ----- 日常逾期分页 ----- //
			dateOverdueList: [],
			detailDateStatus: false, // 详情状态
			dateTotal: 0, // 项目列表总页数
			datePageSize: 10, // 项目列表每页条数
			dateNowPage: 1, // 项目列表当前页码
			dateNowPageNum: 1, // 项目列表当前页码
			
			showCarList: false,
			carListType: 0,
			carTotal: 0,
			carKeyword: '',
			carNowPage: 1,
			carNowPageNum: 1, // 项目列表当前页码
			carList: [],

			interval: true,
			time: '',
			date: '',
			weather: '',
			temperature: '',
			showVillageList: false,
			selectVillageIndex: -1,
			villageId: -1,
			villageList: [],
			yearList: [],
			monthList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
			homeTopData: {
				villageCount: ''
			},

			showTfjlList: false,

			showClllTime: false,
			clllTime: [9, 0],
			clllEchart: null,
			clllEchartHear: {},
			clllEchartOption: {
				grid: {
					top: '20%',
					bottom: 40,
					left: 60,
					right: 60,
				},
				tooltip: {
					confine: true,
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					},
					backgroundColor: 'rgba(0, 21, 43, 0.80)',
					borderColor: 'rgba(43,142,243,0.5)',
					// borderWidth: 2,
					textStyle: {
						color: 'rgba(153, 153, 153, 1)',
						fontSize: 10,
						lineHeight: 14
					},
				},
				legend: {
					itemWidth: 20,
					itemHeight: 4,
					textStyle: {
						color: '#fff',
						fontSize: 12,
					},
					data: [{
						name: '入场数(辆)',
						itemStyle: {
							color: '#2BC5F3'
						}
					}, {
						name: '出场数(辆)',
						itemStyle: {
							color: '#1D7AD9'
						}
					}, {
						name: '实收金额(元)',
						itemStyle: {
							color: '#FD8F21'
						}
					}, {
						name: '优惠金额(元)',
						itemStyle: {
							color: '#FDDB21'
						}
					}]
				},
				xAxis: {
					data: ['1日', '2日', '3日', '4日', '5日', '6日'],
					axisLine: {
						lineStyle: {
							color: '#ccc'
						}
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						color: '#fff',
						fontSize: 12,
					}
				},
				yAxis: [{
					type: 'value',
					name: '单位:辆',
					axisLine: {
						show: true,
						lineStyle: {
							color: '#1D7AD9'
						}
					},
					splitLine: {
						lineStyle: {
							color: 'rgba(204, 204, 204, .3)',
							type: 'dashed'
						}
					},
					nameTextStyle: {
						color: '#fff',
						fontSize: 12
					},
					axisLabel: {
						color: '#fff',
						fontSize: 12,
					},
					// min: 0,
					// max: 250,
					// interval: 50,
					// axisLabel: {
					//   formatter: '{value} ml'
					// }
				},
				{
					type: 'value',
					name: '单位:元',
					axisLine: {
						show: true,
						lineStyle: {
							color: '#AF6113'
						}
					},
					splitLine: {
						show: false,
					},
					nameTextStyle: {
						color: '#fff',
						fontSize: 12
					},
					axisLabel: {
						color: '#fff',
						fontSize: 12,
					}
					// min: 0,
					// max: 25,
					// interval: 5,
					// axisLabel: {
					//   formatter: '{value} °C'
					// }
				}
				],
				series: [{
					name: '入场数(辆)',
					type: 'bar',
					barGap: 0,
					data: [5, 20, 36, 10, 10, 20],
					itemStyle: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{
								offset: 0,
								color: 'rgba(43, 197, 243, 1)' // 0% 处的颜色
							}, {
								offset: 1,
								color: 'rgba(43, 197, 243, 0)' // 100% 处的颜色
							}],
							global: false // 缺省为 false
						}
					}
				},
				{
					name: '出场数(辆)',
					type: 'bar',
					barGap: 0,
					data: [10, 40, 46, 20, 20, 30],
					itemStyle: {
						color: {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 0,
							y2: 1,
							colorStops: [{
								offset: 0,
								color: 'rgba(29, 122, 217, 1)' // 0% 处的颜色
							}, {
								offset: 1,
								color: 'rgba(43, 197, 243, 0)' // 100% 处的颜色
							}],
							global: false // 缺省为 false
						}
					}
				},
				{
					name: '实收金额(元)',
					type: 'line',
					symbol: 'circle',
					symbolSize: 4,
					yAxisIndex: 1,
					itemStyle: {
						color: 'rgba(253, 143, 33, 1)',
						borderWidth: 0,
					},
					lineStyle: {
						color: 'rgba(253, 143, 33, 1)',
					},
					data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2,]
				},
				{
					name: '优惠金额(元)',
					type: 'line',
					symbol: 'circle',
					symbolSize: 4,
					yAxisIndex: 1,
					itemStyle: {
						color: 'rgba(253, 219, 33, 1)',
						borderWidth: 0,
					},
					lineStyle: {
						color: 'rgba(253, 219, 33, 1)',
					},
					data: [4.0, 4.4, 6.6, 8.5, 12.3, 23.2,]
				},
				],
			},

			showTsjyList: false,
			tsjyType: -1,
			noDate: false,
			showTsjyTime: false,
			tsjyTime: [9, 0],
			tsjyHeadData: {},
			tsjyEchartLeft: null,
			tsjyEchartLeftOption: {
				tooltip: {
					confine: true,
					extraCssText: 'z-index: 888',
					trigger: 'item',
					formatter: '{b|{b}}\n{c|{c}}  {per|{d}%}  ',
					backgroundColor: 'rgba(0,21,43,0.8)',
					borderColor: 'rgba(221,247,255,0.4)',
					padding: [4, 8],
					borderWidth: 1,
					borderRadius: 4,
					textStyle: {
						color: '#DDF7FF',
					},
				},
				legend: {
					top: 25,
					padding: [5, 20, 5, 5],
					itemWidth: 20,
					itemHeight: 4,
					textStyle: {
						color: '#fff',
						fontSize: 10,
					},
				},
				series: [{
					type: 'pie',
					radius: ['45%', '46%'],
					center: ['50%', '65%'],
					emphasis: {
						disabled: 'disabled',
					},
					tooltip: {
						show: false,
					},
					labelLine: {
						show: false,
					},
					label: {
						show: false,
					},
					data: [{
						value: 25,
						itemStyle: {
							color: '#26DDF2'
						}
					}]
				}, {
					name: '投诉建议',
					type: 'pie',
					radius: ['0%', '40%'],
					center: ['50%', '65%'],
					avoidLabelOverlap: false,
					// emphasis: {
					// 	label: {
					// 		show: true,
					// 		fontSize: 40,
					// 		fontWeight: 'bold'
					// 	}
					// },
					// labelLine: {
					// 	show: false,
					// },
					labelLine: {
						show: true,
					},
					label: {
						show: true,
						formatter: '{b|{b}} {per|{d}%} ',
						rich: {
							b: {
								fontSize: 10,
								color: 'inherit',
							},
							per: {
								fontSize: 10,
								color: 'inherit',
							},
						},
					},
					data: [{
						value: 0,
						name: '待指派',
						itemStyle: {
							color: '#FD8F21'
						}
					},
					{
						value: 0,
						name: '跟进中',
						itemStyle: {
							color: '#DDF7FF'
						}
					},
					{
						value: 0,
						name: '已完成',
						itemStyle: {
							color: '#26DDF2'
						}
					},
					{
						value: 0,
						name: '已逾期',
						itemStyle: {
							color: '#FD5421'
						}
					},
					]
				}]
			},
			tsjyEchartRight: null,
			tsjyEchartRightOption: {
				grid: {
					top: '27%',
					bottom: 30,
					left: 70,
					right: 30,
				},
				tooltip: {
					confine: true,
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					},
					backgroundColor: 'rgba(0, 21, 43, 0.80)',
					borderColor: 'rgba(43,142,243,0.5)',
					// borderWidth: 2,
					textStyle: {
						color: 'rgba(153, 153, 153, 1)',
						fontSize: 10,
						lineHeight: 14
					},
				},
				legend: {
					top: 25,
					itemWidth: 20,
					itemHeight: 4,
					textStyle: {
						color: '#fff',
						fontSize: 10,
					},
					data: [{
						name: '投诉数量',
						itemStyle: {
							color: '#2BC5F3'
						}
					}]
				},
				xAxis: {
					type: 'value',
					splitLine: {
						lineStyle: {
							color: 'rgba(204, 204, 204, .3)',
							type: 'dashed'
						}
					},
					minInterval: 1,
					axisLabel: {
						color: '#fff',
						fontSize: 12,
					},
				},
				yAxis: {
					name: '单位:单',
					nameTextStyle: {
						color: '#fff',
						fontSize: 12,
						padding: [0, 0, 0, 700]
					},
					data: ['大岭村委', '凌岗村委', '濠头村委', '张家边张家边', '濠头村委', '凌岗村委'],
					axisLabel: {
						color: '#fff',
						fontSize: 12,
						margin: 19,
						formatter: function (value) {
							let valueTxt = '';
							if (value.length > 4) {
								valueTxt = value.substring(0, 3) + '...';
							} else {
								valueTxt = value;
							}
							return valueTxt;
						}
					},
					axisLine: {
						lineStyle: {
							color: '#fff'
						}
					},
					axisTick: {
						show: false
					},
				},
				series: [{
					name: '投诉数量',
					type: 'bar',
					data: [5, 20, 36, 10, 10, 20],
					itemStyle: {
						color: {
							type: 'linear',
							x: 1,
							y: 0,
							x2: 0,
							y2: 0,
							colorStops: [{
								offset: 0,
								color: 'rgba(43, 197, 243, 1)' // 0% 处的颜色
							}, {
								offset: 1,
								color: 'rgba(43, 197, 243, 0)' // 100% 处的颜色
							}],
							global: false // 缺省为 false
						}
					}
				},]
			},

			showRcglList: false,
			rcglType: -1,
			timeType: -1,
			showRcglTime: false,
			rcglTime: [9, 0],
			rcglHeadData: {},
			rcglEchartLeft: null,
			rcglEchartLeftOption: {
				tooltip: {
					confine: true,
					extraCssText: 'z-index: 888',
					trigger: 'item',
					formatter: '{b|{b}}\n{c|{c}}  {per|{d}%}  ',
					backgroundColor: 'rgba(0,21,43,0.8)',
					borderColor: 'rgba(221,247,255,0.4)',
					padding: [4, 8],
					borderWidth: 1,
					borderRadius: 4,
					textStyle: {
						color: '#DDF7FF',
					},
				},
				legend: {
					top: 15,
					padding: [5, 20, 5, 5],
					data: ['待指派', '跟进中', '已完成', '已逾期',],
					itemWidth: 20,
					itemHeight: 4,
					textStyle: {
						color: '#fff',
						fontSize: 10,
					},
				},
				series: [{
					name: '跟进状态',
					type: 'pie',
					radius: ['0%', '40%'],
					center: ['50%', '60%'],
					avoidLabelOverlap: false,
					labelLine: {
						show: false,
					},
					label: {
						show: false,
					},
					data: [{
						value: 0,
						name: '待指派',
						itemStyle: {
							color: '#FD8F21'
						}
					},
					{
						value: 0,
						name: '跟进中',
						itemStyle: {
							color: '#DDF7FF'
						}
					},
					{
						value: 0,
						name: '已完成',
						itemStyle: {
							color: '#26DDF2'
						}
					},
					{
						value: 0,
						name: '已逾期',
						itemStyle: {
							color: '#FD5421'
						}
					},
					]
				},
				{
					name: '违停类型',
					type: 'pie',
					radius: ['50%', '60%'],
					center: ['50%', '60%'],
					avoidLabelOverlap: false,
					labelLine: {
						show: false,
					},
					tooltip: {
						confine: true,
						show: true,
					},
					labelLine: {
						show: true,
					},
					label: {
						show: true,
						formatter: '{b|{b}}\n {c|{c}}{per|({d}%)} ',
						rich: {
							b: {
								fontSize: 10,
								lineHeight: 14,
								color: 'inherit',
							},
							c: {
								fontSize: 10,
								lineHeight: 14,
								color: 'inherit',
								textAlign: 'left',
							},
							per: {
								fontSize: 8,
								color: 'inherit',
								textAlign: 'left',
							},
						},
					},
					data: [{
						value: 123,
						name: '逃费查处',
						itemStyle: {
							color: '#2BC5F3'
						}
					},
					{
						value: 123,
						name: '违停查处',
						itemStyle: {
							color: '#1D7AD9'
						}
					},
					{
						value: 123,
						name: '乱放行为',
						itemStyle: {
							color: '#6FB6FF'
						}
					},
					{
						value: 123,
						name: '乱停行为',
						itemStyle: {
							color: '#5852FF'
						}
					}
					]
				}
				]
			},
			rcglEchartRight: null,
			rcglEchartRightOption: {
				grid: {
					top: '27%',
					bottom: 30,
					left: 70,
					right: 30,
				},
				tooltip: {
					confine: true,
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					},
					// lineStyle: { //设置纵向指示线
					// 	type: 'dashed',
					// 	color: "rgba(255, 255, 255, 1)"
					// },
					backgroundColor: 'rgba(0, 21, 43, 0.80)',
					borderColor: 'rgba(43,142,243,0.5)',
					// borderWidth: 2,
					textStyle: {
						color: 'rgba(153, 153, 153, 1)',
						fontSize: 10,
						lineHeight: 14
					},
				},
				legend: {
					top: 25,
					itemWidth: 20,
					itemHeight: 4,
					textStyle: {
						color: '#fff',
						fontSize: 10,
					},
					data: [{
						name: '巡更次数',
						itemStyle: {
							color: '#2BC5F3'
						}
					}]
				},
				xAxis: {
					type: 'value',
					splitLine: {
						lineStyle: {
							color: 'rgba(204, 204, 204, .3)',
							type: 'dashed'
						}
					},
					minInterval: 1,
					axisLabel: {
						color: '#fff',
						fontSize: 12,
					},
				},
				yAxis: {
					name: '单位:单',
					nameTextStyle: {
						color: '#fff',
						fontSize: 12,
						padding: [0, 0, 0, 700]
					},
					data: ['大岭村委', '凌岗村委', '濠头村委', '张家边张家边', '濠头村委', '凌岗村委'],
					axisLabel: {
						color: '#fff',
						fontSize: 12,
						margin: 19,
						formatter: function (value) {
							let valueTxt = '';
							if (value.length > 4) {
								valueTxt = value.substring(0, 3) + '...';
							} else {
								valueTxt = value;
							}
							return valueTxt;
						}
					},
					axisLine: {
						lineStyle: {
							color: '#fff'
						}
					},
					axisTick: {
						show: false
					},
				},
				series: [{
					name: '巡更次数',
					type: 'bar',
					data: [5, 20, 36, 10, 10, 20],
					itemStyle: {
						color: {
							type: 'linear',
							x: 1,
							y: 0,
							x2: 0,
							y2: 0,
							colorStops: [{
								offset: 0,
								color: 'rgba(43, 197, 243, 1)' // 0% 处的颜色
							}, {
								offset: 1,
								color: 'rgba(43, 197, 243, 0)' // 100% 处的颜色
							}],
							global: false // 缺省为 false
						}
					}
				},]
			}
		}
	},
	watch: {
		clllEchartOption: {
			handler(newValue, oldValue) {
				this.clllEchart.clear()
				this.clllEchart.setOption(newValue);
				if (clllEchartTools) {
					clllEchartTools.clearLoop(clllEchartTools.timeTicket)
				}
				clllEchartTools = tools.loopShowTooltip(this.clllEchart, newValue, {
					loopSeries: true
				});
			},
			deep: true
		},
		tsjyEchartLeftOption: {
			handler(newValue, oldValue) {
				this.tsjyEchartLeft.setOption(newValue);
			},
			deep: true
		},
		tsjyEchartRightOption: {
			handler(newValue, oldValue) {
				this.tsjyEchartRight.setOption(newValue);
				if (tsjyEchartTools) {
					tsjyEchartTools.clearLoop(tsjyEchartTools.timeTicket)
				}
				tsjyEchartTools = tools.loopShowTooltip(this.tsjyEchartRight, this.tsjyEchartRightOption, {
					loopSeries: true
				});
			},
			deep: true
		},
		rcglEchartLeftOption: {
			handler(newValue, oldValue) {
				this.rcglEchartLeft.setOption(newValue);
			},
			deep: true
		},
		rcglEchartRightOption: {
			handler(newValue, oldValue) {
				this.rcglEchartRight.setOption(newValue);
				if (rcglEchartRightTools) {
					rcglEchartRightTools.clearLoop(rcglEchartRightTools.timeTicket)
				}
				rcglEchartRightTools = tools.loopShowTooltip(this.rcglEchartRight, this.rcglEchartRightOption, {
					loopSeries: true
				});
			},
			deep: true
		},
	},
	onLoad(options) {
		this.sensitive = this.getQueryVariable('sensitive') ? this.getQueryVariable('sensitive') : 0
		// if (options.id == undefined) {
		// 	this.selectVillageIndex = -1
		// 	this.villageId = -1
		// } else {
		// 	this.selectVillageIndex = options.index
		// 	this.villageId = options.id
		// }

		const date = new Date()
		const year = date.getFullYear()
		for (let i = 0; i < 10; i++) {
			this.yearList = [year - i, ...this.yearList]
		}
		this.clllTime = [9, date.getMonth()]
		this.tsjyTime = [9, date.getMonth()]
		this.rcglTime = [9, date.getMonth()]

		this.getTime();
		setInterval(_ => {
			this.getTime();
		}, 10)
		this.getTemperature();

		setTimeout(_ => {
			this.clllEchart = this.$echarts.init(this.$refs.clllEchart);
			// this.clllEchart.setOption(this.clllEchartOption);
			// clllEchartTools = tools.loopShowTooltip(this.clllEchart, this.clllEchartOption, {
			// 	loopSeries: true
			// });

			this.tsjyEchartLeft = this.$echarts.init(this.$refs.tsjyEchartLeft);
			// this.tsjyEchartLeft.setOption(this.tsjyEchartLeftOption);

			this.tsjyEchartRight = this.$echarts.init(this.$refs.tsjyEchartRight);
			// this.tsjyEchartRight.setOption(this.tsjyEchartRightOption);
			// tsjyEchartTools = tools.loopShowTooltip(this.tsjyEchartRight, this.tsjyEchartRightOption, {
			// 	loopSeries: true
			// });

			this.rcglEchartLeft = this.$echarts.init(this.$refs.rcglEchartLeft);
			// this.rcglEchartLeft.setOption(this.rcglEchartLeftOption);

			this.rcglEchartRight = this.$echarts.init(this.$refs.rcglEchartRight);
			// this.rcglEchartRight.setOption(this.rcglEchartRightOption);
			// rcglEchartRightTools = tools.loopShowTooltip(this.rcglEchartRight, this.rcglEchartRightOption, {
			// 	loopSeries: true
			// });
		}, 100)

		if (options.id != undefined) {
			this.getGetProjList(options)
			// this.getData()
			this.getOverdueData(options.id, 1)
			this.getOverdueData(options.id, 2)
		} else {
			this.getGetProjList('')
			this.getData()
			this.getOverdueData(this.villageId, 1)
			this.getOverdueData(this.villageId, 2)
		}
		// this.changeVillage(options.id,options.index);
		// 监控页面大小变化更新页面
		uni.onWindowResize((res) => {
			this.$router.go(0)
		})

		setInterval(_ => {
			this.getData()
		}, 300000)
		// },10000)
	},
	methods: {
		change(nowPage) { // 获取当前分页
			this.nowPage = nowPage;
			this.getOverdueData(this.villageId, 1);
		},
		changeSearch() { // 获取当前分页
			this.nowPage = parseInt(this.nowPageNum);
			this.getOverdueData(this.villageId, 1);
		},
		dateChange(nowPage) { // 获取当前分页
			this.dateNowPage = nowPage;
			this.getOverdueData(this.villageId, 2);
		},
		dateChangeSearch() { // 获取当前分页
			this.dateNowPage = parseInt(this.dateNowPageNum);
			this.getOverdueData(this.villageId, 2);
		},
		getData() {
			this.getHomeTopData()
			this.getSuggestData()
			this.getInvestigateData()
			this.getPunchRecordData()
			this.getVehicleaccessData()

			// let time = setInterval(() => { // 等待地图挂载
			// 	if (this.interval) {
			// 		this.getVehicleaccessData()
			// 	}
			// }, 100)
		},
		// 获取村委列表
		getGetProjList(options) {
			uni.request({
				url: this.url + 'api/largescreen/GetProjList?sensitive=' + this.sensitive,
				method: 'GET',
				success: e => {
					if (e.data.code == 200) {
						this.villageList = e.data.data.result
						// console.log(e.data.data.result)
						// this.villageId = this.villageList[0].villageId
						// this.getData()
						if (options != '') {
							this.changeVillage(options.id, options.index)
						}
					}
				},
				fail: e => {
					console.log(e)
				}
			})
		},
		goNewVillage(id, index) {
			// this.changeVillage(id, index);
			this.showVillageList = false
			let {
				href
			} = this.$router.resolve({
				// path: `https://chebo.h-shock.com/stat/index.html#/?sensitive=${this.sensitive}`,
				path: `http://119.91.132.36:8591/stat/index.html#/?sensitive=${this.sensitive}`,
				query: {
					id: id,
					index: index,
				}
			});
			// let url = `https://chebo.h-shock.com/stat/index.html#/?id=${id}&index=${index}&sensitive=${this.sensitive}`
			// let url = `https://chebo.h-shock.com/stat/index.html#/pages/project?id=${id}&sensitive=${this.sensitive}`
			let url = `http://119.91.132.36:8591/stat/index.html#/pages/project?id=${id}&sensitive=${this.sensitive}`
			window.open(url, '_blank');
		},
		changeVillage(id, index) {
			// 判断是否选中已经选中的
			if (this.selectVillageIndex == index) { // 已选中取消选中
				this.selectVillageIndex = -1
				this.villageId = -1
			} else { // 未选中 赋值选中
				this.selectVillageIndex = index
				this.villageId = id

				// uni.setNavigationBarTitle({
				// 	title: this.villageList[this.selectVillageIndex].villageName
				// })
			}
			this.showVillageList = false
			// debugger
			this.getData()
		},
		// 获取头部数据
		getHomeTopData() {
			const date = new Date()
			uni.request({
				url: this.url + 'api/largescreen/Hometop?sensitive=' + this.sensitive,
				method: 'POST',
				data: {
					villageId: this.villageId,
					year: date.getFullYear(),
					month: date.getMonth() + 1,
					sensitive: this.sensitive,
				},
				success: e => {
					// console.log(e.data.data)
					if (e.data.code == 200) {
						this.homeTopData = e.data.data
					}
				},
				fail: e => {
					console.log(e)
				}
			})
		},
		// 获取车流数据
		getVehicleaccessData() {
			uni.request({
				url: this.url + 'api/largescreen/Vehicleaccess?sensitive=' + this.sensitive,
				method: 'POST',
				data: {
					villageId: this.villageId,
					year: this.yearList[this.clllTime[0]],
					month: this.monthList[this.clllTime[1]],
					sensitive: this.sensitive,
				},
				success: e => {
					// console.log(e.data.data)
					const data = e.data.data
					this.clllEchartOption.xAxis.data = data.xAxis
					this.clllEchartOption.series[0].data = data.yAxis_InCar
					this.clllEchartOption.series[1].data = data.yAxis_OutCar
					this.clllEchartOption.series[2].data = data.yAxis_Practical
					this.clllEchartOption.series[3].data = data.yAxis_Discounts
					this.clllEchartHear = {
						discountsAmount: data.discountsAmount,
						monthInCount: data.monthInCount,
						practicalAmount: data.practicalAmount,
						todayInCount: data.todayInCount,
						weekInCount: data.weekInCount,
						monthOutCount: data.monthOutCount,
						todayStop: data.todayStop,
						monthStop: data.monthStop,
					}
				},
				fail: e => {
					console.log(e)
				}
			})
		},
		showClllTimeFn() {
			this.showClllTime = !this.showClllTime
			if (!this.showClllTime) {
				this.getVehicleaccessData()
			}
		},
		showTsjyTimeFn() {
			this.showTsjyTime = !this.showTsjyTime
			if (!this.showTsjyTime) {
				this.getSuggestData()
				this.getOverdueData(this.villageId, 1);
			}
		},
		showRcglTimeFn() {
			this.showRcglTime = !this.showRcglTime
			if (!this.showRcglTime) {
				this.getInvestigateData()
				this.getPunchRecordData()
				this.getOverdueData(this.villageId, 2);
			}
		},
		changeClllTime({
			detail: {
				value
			}
		}) {
			this.clllTime = value
		},
		changeTsjyTime({
			detail: {
				value
			}
		}) {
			this.tsjyTime = value
		},
		changeRcglTime({
			detail: {
				value
			}
		}) {
			this.rcglTime = value
		},
		// 获取投诉建议数据
		getSuggestData() {
			uni.request({
				url: this.url + 'api/largescreen/Suggest?sensitive=' + this.sensitive,
				method: 'POST',
				data: {
					isOperation: 1,
					villageId: this.villageId,
					year: this.yearList[this.tsjyTime[0]],
					month: this.monthList[this.tsjyTime[1]],
					sensitive: this.sensitive,
				},
				success: e => {
					if (e.data.code == 200) {
						const data = e.data.data
						// console.log(data)
						this.tsjyHeadData = {
							assigned: data.assigned,
							followUp: data.followUp,
							finish: data.finish,
							overdue: data.overdue,
						}
						// this.tsjyEchartLeftOption.series[1].data[0].value = data.assigned
						// this.tsjyEchartLeftOption.series[1].data[1].value = data.followUp
						// this.tsjyEchartLeftOption.series[1].data[2].value = data.finish
						// this.tsjyEchartLeftOption.series[1].data[3].value = data.overdue

						let arr = []
						if (data.assigned != 0) {
							arr.push({
								value: data.assigned,
								name: '待指派',
								itemStyle: {
									color: '#FD8F21'
								}
							})
						}
						if (data.followUp != 0) {
							arr.push({
								value: data.followUp,
								name: '跟进中',
								itemStyle: {
									color: '#DDF7FF'
								}
							})
						}
						if (data.finish != 0) {
							arr.push({
								value: data.finish,
								name: '已完成',
								itemStyle: {
									color: '#26DDF2'
								}
							})
						}
						if (data.overdue != 0) {
							arr.push({
								value: data.overdue,
								name: '已逾期',
								itemStyle: {
									color: '#FD5421'
								}
							})
						}

						this.tsjyEchartLeftOption.series[1].data = arr;

						this.tsjyEchartRightOption.yAxis.data = data.yAxis
						this.tsjyEchartRightOption.series[0].data = data.xAxis
					}
				},
				fail: e => {
					console.log(e)
				}
			})
		},
		// 获取日常管理数据
		getInvestigateData() {
			uni.request({
				url: this.url + 'api/largescreen/Investigate?sensitive=' + this.sensitive,
				method: 'POST',
				data: {
					isOperation: 1,
					villageId: this.villageId,
					year: this.yearList[this.rcglTime[0]],
					month: this.monthList[this.rcglTime[1]],
					sensitive: this.sensitive,
				},
				success: e => {
					// console.log(e.data.data)
					if (e.data.code == 200) {
						const data = e.data.data
						this.rcglHeadData = {
							todayCount: data.todayCount,
							weekCount: data.weekCount,
							monthCount: data.monthCount,
						}

						// this.rcglEchartLeftOption.series[0].data[0].value = data.assigned
						// this.rcglEchartLeftOption.series[0].data[1].value = data.followUp
						// this.rcglEchartLeftOption.series[0].data[2].value = data.finish
						// this.rcglEchartLeftOption.series[0].data[3].value = data.overdue

						let arr = []
						if (data.assigned != 0) {
							arr.push({
								value: data.assigned,
								name: '待指派',
								itemStyle: {
									color: '#FD8F21'
								}
							})
						}
						if (data.followUp != 0) {
							arr.push({
								value: data.followUp,
								name: '跟进中',
								itemStyle: {
									color: '#DDF7FF'
								}
							})
						}
						if (data.finish != 0) {
							arr.push({
								value: data.finish,
								name: '已完成',
								itemStyle: {
									color: '#26DDF2'
								}
							})
						}
						if (data.overdue != 0) {
							arr.push({
								value: data.overdue,
								name: '已逾期',
								itemStyle: {
									color: '#FD5421'
								}
							})
						}

						this.rcglEchartLeftOption.series[0].data = arr;

						this.rcglEchartLeftOption.series[1].data = []
						// console.log(data.subTypeGroup)
						for (let i = 0; i < data.subTypeGroup.length; i++) {
							this.rcglEchartLeftOption.series[1].data[i] = {
								value: data.subTypeGroup[i].value,
								name: data.subTypeGroup[i].name,
								itemStyle: {
									color: data.subTypeGroup[i].color
								}
							}
						}
					}
				},
				fail: e => {
					console.log(e)
				}
			})
		},
		// 获取逾期数据
		getOverdueData(villageId, type) {
			uni.request({
				url: this.url + 'api/largescreen/GetOverdueList?sensitive=' + this.sensitive,
				method: 'POST',
				data: {
					villageId: villageId,
					pageNum: type == 1 ? this.nowPage : this.dateNowPage,
					pageSize: this.pageSize,
					type: type,
					// year: type == 1 ? this.yearList[this.tsjyTime[0]] : this.yearList[this.rcglTime[0]],
					// month: type == 1 ? this.monthList[this.tsjyTime[1]] : this.monthList[this.rcglTime[1]],
					sensitive: this.sensitive,
				},
				success: e => {
					if (e.data.code == 200) {
						if (type == 1) {
							this.overdueList = e.data.data.result;
							this.total = e.data.data.totalNum;
							// console.log(this.overdueList)
						} else {
							this.dateOverdueList = e.data.data.result;
							this.dateTotal = e.data.data.totalNum;
							// console.log(this.dateOverdueList)
							// debugger
						}
					}

				},
				fail: e => {
					console.log(e)
				}
			})
		},
		// 获取巡更数据
		getPunchRecordData() {
			uni.request({
				url: this.url + 'api/largescreen/PunchRecord?sensitive=' + this.sensitive,
				method: 'POST',
				data: {
					villageId: this.villageId,
					year: this.yearList[this.rcglTime[0]],
					month: this.monthList[this.rcglTime[1]],
					sensitive: this.sensitive,
				},
				success: e => {
					if (e.data.code == 200) {
						const data = e.data.data
						// console.log(data)
						this.rcglEchartRightOption.yAxis.data = data.yAxis
						this.rcglEchartRightOption.series[0].data = data.xAxis
					}
				},
				fail: e => {
					console.log(e)
				}
			})
		},

		getTime() { // 获取时间
			const wMap = ['日', '一', '二', '三', '四', '五', '六',]
			const date = new Date()
			const y = date.getFullYear()
			const m = date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
			const d = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate()
			const w = wMap[date.getDay()]
			const h = date.getHours() >= 10 ? date.getHours() : '0' + date.getHours()
			const min = date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes()
			const s = date.getSeconds() >= 10 ? date.getSeconds() : '0' + date.getSeconds()
			this.time = h + ':' + min + ':' + s
			this.date = y + '-' + m + '-' + d + ' 星期' + w
		},
		getTemperature() { // 设置温度
			uni.request({
				url: "https://restapi.amap.com/v3/weather/weatherInfo?key=ecd60baf0cc86faf25642730ff682823&city=%E4%B8%AD%E5%B1%B1%E5%B8%82&extensions=base",
				success: (e) => {
					this.weather = e.data.lives[0].weather;
					this.temperature = e.data.lives[0].temperature_float + '­°C'
					// console.log('e', e);
				}
			})
		},
		openWindows(type) { // 打开投诉建议/日常管理
			this.openType = type;
			if (type == 1) {
				this.detailStatus = true;
			} else {
				this.detailDateStatus = true;
			}
		},
		// 查询车辆登记名单管理
		getJSCarInfoList() {
			uni.request({
				url: this.url + 'api/largescreen/getJSCarInfoList?sensitive=' + this.sensitive,
				method: 'POST',
				data: {
					// villageId: this.villageId,
					type: this.carListType,
					userType: 1,
					pageNum: this.carNowPage,
					pageSize: 10,
					key: this.carKeyword,
					sensitive: this.sensitive,
				},
				success: e => {
					console.log('查询车辆登记名单管理')
					console.log(e)
					if (e.data.code == 200) {
						const data = e.data.data
						this.carTotal = data.totalNum
						this.carList = data.result
					} else {
						uni.showToast({
							title: e.data.msg,
							icon: 'none'
						})
					}
				},
				fail: e => {
					console.log(e)
				}
			})
		},
		// 确定搜索车辆登记列表
		searchCarList() {
			this.carNowPage = 1
			this.getJSCarInfoList()
		},
		// 重置搜索车辆登记列表
		resetCarList() {
			this.carNowPage = 1
			this.carListType = 0
			this.carKeyword = ''
			this.getJSCarInfoList()
		},
		// 车辆组件函数控制
		changeCarList(carNowPage) { // 获取当前分页
			this.carNowPage = carNowPage;
			this.getJSCarInfoList();
		},
		changeCarListSearch() { // 获取当前分页
			this.carNowPage = parseInt(this.carNowPageNum);
			this.getJSCarInfoList();
		},
		clickType(type){
			this.showCarList = true
			this.carListType = type;
			this.searchCarList();
		},
		clickType(type){
			this.showCarList = true
			this.carListType = type;
			this.searchCarList();
		},
		getQueryVariable(variable) { // 获取url参数
			var query = window.location.href.substring(window.location.href.indexOf('?') + 1);
			var vars = query.split("&");
			for (var i = 0; i < vars.length; i++) {
				var pair = vars[i].split("=");
				if (pair[0] == variable) { return pair[1]; }
			}
			return (false);
		},
		hideTsjy() {
			this.showTsjyList = false
		},
		hideRcgl() {
			this.showRcglList = false
		},
		hideTfjl() {
			this.showTfjlList = false
		},
		resetList() {
			this.tsjyType = -1
			this.rcglType = -1
		},
	}
}
</script>

<style>
@import url(@/static/styles.css);
</style>